<template>
  <div class="page">
    <el-form
      ref="queryFormEl"
      :inline="true"
      :model="_reactive.queryForm"
      v-if="props.queryFormItems.length > 0"
    >
      <el-row :gutter="12">
        <el-col
          class="pb-3"
          :span="6"
          v-for="(formItem, formItemIndex) in props.queryFormItems"
          :key="formItemIndex"
        >
          <el-form-item :prop="formItem.prop">
            <template v-if="formItem.type == 'option'">
              <el-select
                class="w-full"
                v-model="_reactive.queryForm[formItem.prop]"
                :placeholder="'选择' + formItem.label"
                clearable
              >
                <template v-if="formItem.optionName">
                  <el-option
                    v-for="(opVal, opKey) in _options.getOption(formItem.optionName)"
                    :key="opKey"
                    :label="opVal"
                    :value="opKey"
                  />
                </template>
                <template v-else>
                  <el-option label="Zone one" value="shanghai" />
                </template>
              </el-select>
            </template>
            <template v-else>
              <el-input
                class="w-full"
                v-model="_reactive.queryForm[formItem.prop]"
                :placeholder="'输入' + formItem.label"
                clearable
              />
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" @click="handQuery">查询</el-button>
            <el-button @click="resetQuery(false)">重置</el-button>
            <el-button @click="handCreate" v-if="actions.includes('create')">添加</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="_reactive.list" style="width: 100%" border v-loading="loading">
      <template v-for="(column, cIndex) in columns" :key="cIndex">
        <!-- slot -->
        <slot v-if="column.slot" :name="column.slot"></slot>
        <!-- options -->
        <el-table-column
          v-else-if="column.optionName"
          :prop="column.prop"
          :label="column.label"
          :min-width="column.width"
          :align="column.align || 'center'"
          :show-overflow-tooltip="column.tooltip"
        >
          <template #default="{ row }">
            <el-tag effect="dark">{{
              _options.getVal(column.optionName, row[column.prop])
            }}</el-tag>
          </template>
        </el-table-column>
        <!-- action -->
        <el-table-column
          v-else-if="column.prop === 'action'"
          :label="column.label || '操作'"
          :min-width="column.width"
          :align="column.align || 'center'"
        >
          <template #default="{ row }">
            <el-link
              :underline="false"
              @click="handUpdate(row)"
              v-if="actions.includes('update')"
              >{{ column.editTxt || '编辑' }}</el-link
            >
            <el-popconfirm
              v-if="actions.includes('remove')"
              title="确定删除数据吗?"
              @confirm="handRemove(row)"
            >
              <template #reference>
                <el-link :underline="false" type="danger">{{ column.removeTxt || '删除' }}</el-link>
              </template>
            </el-popconfirm>
            <el-link
              :underline="false"
              @click="handDetail(row)"
              v-if="actions.includes('detail')"
              >{{ column.detailTxt || '详情' }}</el-link
            >
          </template>
        </el-table-column>
        <el-table-column
          v-else
          :prop="column.prop"
          :label="column.label"
          :min-width="column.width"
          :align="column.align || 'center'"
          :show-overflow-tooltip="column.tooltip"
        >
        </el-table-column>
      </template>
    </el-table>
    <el-pagination
      class="mt-5 flex justify-center"
      background
      layout="total, sizes, prev, pager, next"
      :page-sizes="[10, 20, 30, 40]"
      :total="_reactive.requestParams.total"
      v-model:current-page="_reactive.requestParams.pageIndex"
      v-model:page-size="_reactive.requestParams.pageSize"
      @size-change="getList"
      @current-change="getList"
    />
  </div>
</template>

<script lang="ts" setup>
import { inject, onBeforeMount, reactive, ref, defineEmits } from 'vue'

const _api: any = inject('_api')
const _options: any = inject('_options')
const _emit = defineEmits(['create', 'update', 'remove', 'detail'])

interface Props {
  requestUrl: string
  queryFormItems: any[]
  columns: any[]
  actions?: string[]
}
const props = withDefaults(defineProps<Props>(), {
  requestUrl: '',
  queryFormItems: () => [],
  columns: () => [],
  actions: () => []
})

const _reactiveParams: { queryForm: any; requestParams: any; list: any } = {
  queryForm: {},
  requestParams: {
    pageSize: 10,
    pageIndex: 1,
    total: 0
  },
  list: []
}
const _reactive = reactive(_reactiveParams)
const loading = ref(false)
const getList = async () => {
  try {
    loading.value = true
    const params = {
      url: props.requestUrl,
      params: { ..._reactive.requestParams, ..._reactive.queryForm }
    }
    const result: any = await _api(params)
    _reactive.list = result.data.rows
    _reactive.requestParams.total = result.data.total
    loading.value = false
  } catch (error) {
    //
    loading.value = false
  }
}

const handQuery = () => {
  _reactive.requestParams.pageIndex = 1
  getList()
}

const resetQuery = (isInit: boolean) => {
  let _queryForm: { [key: string]: any } = {}
  if (props.queryFormItems.length > 0) {
    props.queryFormItems.forEach((item) => {
      _queryForm[item.prop] = isInit ? item.default || undefined : undefined
    })
  }
  _reactive.queryForm = _queryForm
  if (isInit) return
  handQuery()
}
onBeforeMount(() => {
  resetQuery(true)
  getList()
})
function handCreate() {
  _emit('create')
}
function handUpdate(row: any) {
  _emit('update', row)
}
function handRemove(row: any) {
  _emit('remove', row)
}
function handDetail(row: any) {
  _emit('detail', row)
}

defineExpose({ handQuery })
</script>

<style>
.el-tooltip__popper {
  max-width: 400px;
}
.el-form--inline .el-form-item {
  margin: 0;
  width: 100%;
}

.el-link + .el-link {
  margin-left: 12px;
}
</style>
